<style lang="less">
	.comment-img{
		width: 40px;
		height: 40px;
	}
</style>
<template>
  <div>
    <Row>
      <Col span="24">
        <Card style="margin-bottom: 10px">
          <Form inline>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.type" clearable placeholder="请选择类别" style="width:100px">
                <Option :value="1">活动名称</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Input v-model="searchConf.keywords" placeholder=""></Input>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <div>
            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                  :page-size="tableShow.pageSize" @on-change="changePage"
                  @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal v-model="show" width="668" :styles="{top: '30px'}">
      <CommentDetail :id="id"></CommentDetail>
      <div slot="footer">
        <Button type="primary" @click="show=false">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import {getList, del} from '@/api/comment'

  import CommentDetail from './comment-detail';
  let _this = null;
  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要删除这条数据吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          debugger
          del(currentRow.id).then(response => {
            vm.tableData.splice(index, 1);
            vm.$Message.success(response.data.msg)
          });
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          size: 'small',
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '删除')
    ])
  };
  const img = (vm, h, imgs, index) => {
    let imgDoms = [];
    if (imgs != null) {
      imgs.forEach(v => {
        imgDoms.push(h('img', {
          class:'comment-img',
          style: {
            padding: '3px'
          },
          attrs: {
            src: vm.GLOBAL.getUrl(v, false, true)
          },
        }))
      })
    }
    return imgDoms;

  };
  const viewButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small',
        type: 'default'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.id = currentRow.id;
          vm.show = true;
        }
      }
    }, '查看')
  };
  export default {
    name: 'comment_list',
    data() {
      return {
        show: false,
        id: -1,
        goods_id: null,
        columnsList: [
          {
            title: '序号',
            type: 'index',
            width: 65,
            align: 'center'
          },
          {
            title: '昵称',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.userInfo.nickname)
            },
            width: 140
          },
          {
            title: '活动名',
            align: 'center',
            key: 'goods_title',
            width: 120
          },
          {
            title: '内容',
            align: 'center',
            key: 'content',
            width: 220
          },
          {
            title: '图片',
            align: 'center',
            render: (h, params) => {
              return h('div',
                {
                  style: {
                    display: 'flex'
                  }
                },
                img(_this, h, params.row.imgs, params.index)
              )
            },
            width: 220
          },
          {
            title: '创建日期',
            align: 'center',
            key: 'create_time',
            width: 180
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                viewButton(_this, h, params.row, params.index),
                deleteButton(_this, h, params.row, params.index)
              ])
            }
          }
        ],
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          type: '',
          keywords: ''
        },
      }
    },
    watch: {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        // if (to.name === 'comment_list' && to.name === from.name) {
          // 重置数据
          Object.assign(this.$data, this.$options.data());
          /** 初始化其他数据 */
          this.init();
        // }

      }
    },
    components: {
      CommentDetail
    },
    created() {
      _this = this;
      this.init();
    },
    methods: {
      init() {
        this.goods_id = this.$route.params.goods_id;
        this.getList()
      },
      changePage(page) {
        this.tableShow.currentPage = page;
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size;
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1;
        this.getList()
      },
      getList() {
        let vm = this
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          type: vm.searchConf.type,
          keywords: vm.searchConf.keywords
        };
        if (this.goods_id != null) {
          params.goods_id = this.goods_id;
        }
        getList(params).then(response => {
          if (response.data.data.list != null) {
            response.data.data.list.forEach(v => {
              if (v.imgs != null) {
                v.imgs = JSON.parse(v.imgs);
              }
            });
            vm.tableData = response.data.data.list
          } else {
            vm.tableData = [];
          }

          vm.tableShow.listCount = response.data.data.count
        })
      }
    }
  }
</script>
